<template>
	<view class="page">
		<!-- 电话号码登录支持H5 和 App 平台 -->
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="loginTop">
			<view class="loginTopBack"><!-- <image src="../../static/loginIco/fanhui.png" mode="" class="loginTopBack"></image> --></view>
			<view class="loginTopCode" v-if="loginMode == 1" @click="loginCode">验证码登录</view>
			<view class="loginTopCode" v-else-if="loginMode == 2" @click="loginPhone">账号密码登录</view>
		</view>

		<!-- 登录框 -->
		<view class="loginBox">
			<view class="logoImgBox"><image :src="loginImage" mode="" class="logoImgBox"></image></view>
			<view class="loginInptu">
				<input type="text" v-if="loginMode == 1" class="username" value="" placeholder="请输入用户名/手机号" maxlength="11" @input="phoneInput" />
				<input type="number" v-else-if="loginMode == 2" class="username" value="" placeholder="请输入手机号" maxlength="11" @input="phoneInput" />
			</view>
			<view class="loginInptu" v-if="loginMode == 1"><input type="password" class="password" value="" placeholder="请输入密码" maxlength="16" @input="passwordInpur" /></view>
			<view class="loginInptu loginInptuCode" v-else-if="loginMode == 2">
				<input type="text" class="code" value="" placeholder="请输入验证码" maxlength="4" @input="codeInput" />
				<view class="huoquyanzhengma" @click="getCode">{{ codeBut }}</view>
			</view>
			<view class="loginUp" @click="loginUp"><image src="../../static/loginIco/denglu.png" mode="" class="loginUpImg"></image></view>
		</view>
		<!-- 其他登录方式 -->
		<view class="otherLoginTitle">————————其他登录方式————————</view>
		<view class="otherLogin">
			<view class="weiixnLogin" @click="weixinlogin"><image src="../../static/loginIco/weixin.png" mode=""></image></view>
			<view class="qqLogin" @click="qqlogin"><image src="../../static/loginIco/QQ.png" mode=""></image></view>
			<view class="weiboLogin" @click="weibologin"><image src="../../static/loginIco/weibo.png" mode=""></image></view>
		</view>

		<!-- 忘记密码/新用户注册 -->
		<view class="bottomBox">
			<view class="wangjimima">忘记密码</view>
			<view class="yonghuzhuce">用户注册</view>
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<!-- <button class="loginWeChatBtn" open-type="getUserInfo" @getuserinfo="wxLogin" ></button> -->
		<button class="loginWeChatBtn" open-type="getUserInfo" @getuserinfo="wechatLogin">微信一键登录</button>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			loginMode: 1,
			usernameType:"text",
			codeBut:"获取验证码",
			loginImage:"../../static/loginIco/logo.png",
			codeClick:true,
			phone:"",
			password:"",
			code:"",
		}
	},
	onLoad() {
		
		

	},
	methods: {
		// loginCode() {
		// 	this.loginMode = 2
		// 	this.usernameType = "number"
		// },
		// loginPhone() {
		// 	this.loginMode = 1
		// 	this.usernameType = "text"
		// },
		// 手机号输入
		// phoneInput(e){
		// 	this.phone = e.detail.value
		// },
		// 密码输入
		// passwordInpur(e){
		// 	this.password = e.detail.value
		// },
		// 验证码输入
		// codeInput(e){
		// 	this.code = e.detail.value
		// },
		// 点击登录
		// loginUp(){
		// 	var _that = this
		// 	if(_that.phone == ""){
		// 		uni.showToast({
		// 			title: '请输入用户名',
		// 			icon: 'none',
		// 			duration:1000
		// 		});
		// 	}else if(_that.password == "" && _that.loginMode == 1){
		// 		uni.showToast({
		// 			title: '请输入密码',
		// 			icon: 'none',
		// 			duration:1000
		// 		});
		// 	}else if(_that.code == "" && _that.loginMode == 2){
		// 		uni.showToast({
		// 			title: '请输入验证码',
		// 			icon: 'none',
		// 			duration:1000
		// 		});
		// 	}else{
		// 		//这里请求接口
		// 		console.log(_that.phone,_that.password,_that.code)
		// 	}
		// },
		// 获取验证码
		// getCode(){
		// 	var _that = this
		// 	const mobsms = uni.requireNativePlugin('WB-MobSms');
		// 	// 倒计时
		// 	if(_that.codeClick){
		// 		if(_that.phone[0] != 1 || _that.phone.length != 11){
		// 			uni.showToast({
		// 				title: '请输入正确的手机号',
		// 				icon: 'none',
		// 				duration: 800
		// 			});
		// 		}else{
		// 			_that.codeClick = false
		// 			// 发送短信
		// 			mobsms.sendSms(
		// 				{zone: '86',phone_number: _that.phone},
		// 				result => {if (result.status == 'success') {
		// 						uni.showToast({
		// 							title: '验证码获取中',
		// 							icon: 'loading',
		// 							duration: 800
		// 						});
		// 					}
		// 				}
		// 			);
		// 			// 倒计时开始
		// 			var daojishi = 60
		// 			var xianshi = setInterval(function(){
		// 				_that.codeBut = "重新发送"+daojishi;
		// 				daojishi--
		// 				if(daojishi<=0){
		// 					_that.codeBut = "重新发送"
		// 					_that.codeClick = true
		// 					clearInterval(xianshi);
		// 				}
		// 			},1000)
		// 		}
		// 	}
		// },
		// 微信登录
		// weixinlogin(){
		// 	uni.login({
		// 	  provider: 'weixin',
		// 	  success: function (loginRes) {
		// 	    console.log(loginRes.authResult);
		// 	    // 获取用户信息
		// 	    uni.getUserInfo({
		// 	      provider: 'weixin',
		// 	      success: function (infoRes) {
		// 			console.log(infoRes)
		// 	        console.log('用户昵称为：' + infoRes.userInfo.nickName);
		// 	      }
		// 	    });
		// 	  }
		// 	});
		// },
		// qq登录
		// qqlogin(){
		// 	var _that = this
		// 	uni.login({
		// 	  provider: 'qq',
		// 	  success: function (loginRes) {
		// 		  uni.getUserInfo({
		// 		    provider: 'qq',
		// 		    success: function (infoRes) {
		// 		  	console.log(infoRes)
		// 				_that.loginImage = infoRes.userInfo.figureurl_qq_2
		// 		    }
		// 		  });
		// 	  }
		// 	});
		// },
		// 微博登录
		// weibologin(){
		// 	uni.login({
		// 		provider:"sinaweibo",
		// 		success: function (loginRes) {
		// 		  console.log(loginRes.authResult);
		// 		}
		// 	})
		// }
		//实现微信小程序端的微信登录
		// wxLogin(e){
		// 	// console.log(e)
		// 	//通过微信开发能力，获取微信用户的基本信息
		// 	//实现微信登录
		// 	uni.login({
		// 		provider:"weixin",
		// 		success(loginResult) {
		// 			console.log(loginResult)
		// 			console.log(loginResult.authResult);
		// 			// 获取用户信息
		// 			uni.getUserInfo({
		// 			  provider: 'weixin',
		// 			  success: function (infoRes) {
		// 				console.log(infoRes)
		// 				console.log('用户昵称为：' + infoRes.userInfo.nickName);
		// 			  }
		// 			});

		// 			//获得微信登录code:授权码
		// 			let code = loginResult.code
		// 			console.log(code)
		// 			uni.request({
		// 				url:this.serverUlr + "/mpWXLogin/" + code,
		// 				data:{
		// 					"avatarUlr":userInfo.avatarUrl,
		// 					"nickName":userInfo.nickName,
		// 					"whichMP":1,
		// 				},
		// 				method:"POST",
		// 				success(userResult) {
		// 					let userInfo = userResult.data.data;
		// 					// console.log(userInfo)
		// 					uni.setStorageSync("globalUser", userInfo) //保存用户信息到全局缓存中（同步的）
		// 					//切换页面跳转，使用tab切花的api
		// 					uni.switchTab({
		// 						url:"../me/me"
		// 					})
		// 				}
		// 			})
		// 		}
		// 	})
		// },
		wechatLogin(){
						var that=this
						// 获取用户名  获取性别 获取头像 获取js_code去换取后台返回的openID
						uni.login({
						  provider: 'weixin',
						  success: function (loginRes) {
							let js_code=loginRes.code;//js_code可以给后台获取unionID或openID作为用户标识
							// 获取用户信息
							uni.getUserInfo({
							  provider: 'weixin',
							  success: function (infoRes) {
								//infoRes里面有用户信息需要的话可以取一下
								let username=infoRes.userInfo.nickName;//用户名
								let gender=infoRes.userInfo.gender;//用户性别
							    let avatarUrl=infoRes.userInfo.avatarUrl;//头像
							 //判断是否授权
							  uni.getSetting({
							   success(res) {
							  	console.log("授权：",res);
							     if (!res.authSetting['scope.userInfo']) {
							  		//这里调用授权
							  		console.log("当前未授权");
							     } else {
							  		//用户已经授权过了
							  		console.log("当前已授权");
							  		// 弹出正在登录的弹框
							  		uni.showLoading({
							  			mask:true,
							  			title: '正在登录···',
							  			complete:()=>{}
							  		});
							  		// 判断已授权调取接口并获取openId
							  		that.$apiReq.req({ // 创建对象
							  			url: '/ui/wxutil/loginByWx', // 示例请求路径
							  		    method:"post",
							  			data : {
							  				'code':js_code,
							  			},
							  			success: (res) => {
							  			 //需要openId 可以在这里打印出来
							  				// if(res.data.code==202){
							  				// 	// 登录成功后判断是否是第一次注册  如果是弹出选择身份页面
							  				// 	 uni.navigateTo({
							  				// 		url: './registeredIdentity/registeredIdentity'
							  				// 		success: res => {},
							  				// 		fail: () => {},
							  				// 		complete: () => {}
							  				// 		});
							  				//     }else if(res.data.code==201){
							  				// 		 uni.switchTab({
							  				// 				url: '../homePage/homePage',
							  				// 				success: res => {},
							  				// 				fail: () => {},
							  				// 				complete: () => {}
							  				// 		 });
							  				// }
							  			},
							  		 })

							     }
							   }
							  })
							  },
							  fail:function(res){}
							})
						  },
						  fail:function(res){}
						})
					},

	}
}
</script>

<style scoped>
@import url('login.css');
</style>
